<?php if (!defined('THINK_PATH')) exit();?><!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			td.highlight {
				background-color: whitesmoke !important;
			}
		</style>
		<!-- Tell the browser to be responsive to screen width -->
		<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
		<!-- Bootstrap 3.3.7 -->
		<link rel="stylesheet" href="/Public/bower_components/bootstrap/dist/css/bootstrap.min.css">
		<!-- Font Awesome -->
		<link rel="stylesheet" href="/Public/bower_components/font-awesome/css/font-awesome.min.css">
		<!-- Ionicons -->
		<link rel="stylesheet" href="/Public/bower_components/Ionicons/css/ionicons.min.css">
		<!-- DataTables -->
		<link rel="stylesheet" href="/Public/bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css">
		<!-- Theme style -->
		<link rel="stylesheet" href="/Public/dist/css/AdminLTE.min.css">
		<!-- AdminLTE Skins. Choose a skin from the css/skins
       folder instead of downloading all of them to reduce the load. -->
		<link rel="stylesheet" href="/Public/dist/css/skins/_all-skins.min.css">

	</head>

	<body>
		<table id="example" class="row-border hover order-column" cellspacing="0" width="100%">
			<thead>
				<tr>
					<th>编号</th>
					<th>姓名</th>
					<th>编码</th>
					<th>是否可用</th>
					<th>备注</th>
				</tr>
			</thead>
			<tbody><tr>
					<th>编号</th>
					<th>姓名</th>
					<th>编码</th>
					<th>是否可用</th>
					<th>备注</th>
				</tr><tr>
					<th>编号</th>
					<th>姓名</th>
					<th>编码</th>
					<th>是否可用</th>
					<th>备注</th>
				</tr><tr>
					<th>编号</th>
					<th>姓名</th>
					<th>编码</th>
					<th>是否可用</th>
					<th>备注</th>
				</tr><tr>
					<th>编号</th>
					<th>姓名</th>
					<th>编码</th>
					<th>是否可用</th>
					<th>备注</th>
				</tr><tr>
					<th>编号</th>
					<th>姓名</th>
					<th>编码</th>
					<th>是否可用</th>
					<th>备注</th>
				</tr><tr>
					<th>编号</th>
					<th>姓名</th>
					<th>编码</th>
					<th>是否可用</th>
					<th>备注</th>
				</tr></tbody>
			<tfoot>
				<tr>
					<th>编号</th>
					<th>姓名</th>
					<th>编码</th>
					<th>是否可用</th>
					<th>备注</th>
				</tr>
			</tfoot>
		</table>
		<!-- jQuery 3 -->
		<script src="/Public/bower_components/jquery/dist/jquery.min.js"></script>
		<!-- Bootstrap 3.3.7 -->
		<script src="/Public/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
		<!-- DataTables -->
		<script src="/Public/bower_components/datatables.net/js/jquery.dataTables.min.js"></script>
		<script src="/Public/bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
		<!-- SlimScroll -->
		<script src="/Public/bower_components/jquery-slimscroll/jquery.slimscroll.min.js"></script>
		<!-- FastClick -->
		<script src="/Public/bower_components/fastclick/lib/fastclick.js"></script>
		<!-- AdminLTE App -->
		<script src="/Public/dist/js/adminlte.min.js"></script>
		<!-- AdminLTE for demo purposes -->
		<script src="/Public/dist/js/demo.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				var lastIdx = null;
				var table = $('#example').DataTable();
				$('#example tbody')
					.on('mouseover', 'td', function() {
						var colIdx = table.cell(this).index().column;
						if(colIdx !== lastIdx) {
							$(table.cells().nodes()).removeClass('highlight');
							$(table.column(colIdx).nodes()).addClass('highlight');
						}
					})
					.on('mouseleave', function() {
						$(table.cells().nodes()).removeClass('highlight');
					});
			});
		</script>
	</body>

</html>